<div id="areaset">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel3">仓库区域设置</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>仓库<span class="required"></span></td>
                        <td>
                            {{warehouse_name}}
                        </td>
                        <td colspan="2" align="right">
                            <button class="btn btn-primary" @click="addfunc()"><span
                                    class="glyphicon glyphicon-plus"></span> 添加
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>区域名称<span class="required"></span></td>
                        <td>
                            <input type="text" value="" class="form-control" v-model="name">
                        </td>
                        <td>类型<span class="required"></span></td>
                        <td>
                            <select name="area_type" id="area_type" class="form-control" v-model="type_id">
                                <option :value="item.id" v-for="(item,index) in areatype">{{item.content}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>说明</td>
                        <td>
                            <input type="text" value="" class="form-control" v-model="remarks">
                        </td>
                        <td>体积<span class="required"></span></td>
                        <td>
                            <input type="text" value="" class="form-control text-right" v-model="volume">
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 div-scroll" style="height: 40vh">
                <table class="table table-hover ntTable">
                    <thead>
                    <tr>
                        <th>类型</th>
                        <th>区域名称</th>
                        <th>说明</th>
                        <th>体积</th>
                        <th>编辑</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in arealist" v-if="arealist.length>0">
                        <td>{{item.type_name}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.remarks}}</td>
                        <td>{{item.volume}}</td>
                        <td>{{item.mangname}} <br> {{item.update_date}}</td>
                        <td class="text-right">
                            <button class="btn btn-sm btn-primary" @click="editfun(index)">
                                <span class="glyphicon glyphicon-pencil"></span>编辑
                            </button>
                            <button class="btn btn-sm btn-default" @click="delitem(index)">
                                <span class="glyphicon glyphicon-trash"></span>删除
                            </button>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="arealist.length==0">
                        <td colspan="6" class="no_date">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" :disabled="isdisadble" class="btn btn-primary" @click="subfun" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
    <input type="hidden" name="id" id="id" value="{$id|default=''}">
</div>
<script>
    new Vue({
        el: '#areaset',
        data: () => ({
            isdisadble: false,
            warehouse_name: '',
            name: '',
            type_id: '1',
            remarks: '',
            volume: '1',
            arealist: [],
            areatype: [],
            indexearea: 'a',
        }),
        methods: {
            //保存数据
            subfun(){
                this.isdisadble=true;
                $.ajax({
                    url: '/admin/warehouses/setingarea',
                    data: {
                        warehouse_id: $('#id').val(),
                        areasub: '',
                        arealist: this.arealist
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            $('#area_editModal').modal('hide');
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //进入的数据
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/warehouses/setingarea?id=' + $('#id').val() + "&areadata",
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.arealist = data.resdata;
                        this.warehouse_name = data.name;
                        this.areatype = data.areatype
                        $('.loding').hide();
                    }
                })
            },
            //删除
            delitem(index){
                this.arealist.splice(index, 1);
                this.indexearea = 'a'
            },
            //编辑
            editfun(index){
                this.name = this.arealist[index].name
                this.type_id = this.arealist[index].type_id
                this.remarks = this.arealist[index].remarks
                this.volume = this.arealist[index].volume
                this.indexearea = index
            },
            //添加
            addfunc(){
                //请求接口
                $.ajax({
                    url: '/admin/warehouses/setingarea',
                    data: {
                        areaadd: '',
                        name: this.name,
                        volume: this.volume,
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            if (this.indexearea >= 0 && this.indexearea != 'a') {
                                //编辑后点击添加
                                this.arealist[this.indexearea]['type_id'] = this.type_id;
                                this.arealist[this.indexearea]['type_name'] = $("#area_type").find("option:selected").text();
                                this.arealist[this.indexearea]['name'] = this.name;
                                this.arealist[this.indexearea]['remarks'] = this.remarks;
                                this.arealist[this.indexearea]['volume'] = this.volume;
                                this.arealist[this.indexearea]['update_at'] = data.resdata.update_at;
                                this.arealist[this.indexearea]['update_date'] = data.resdata.update_date;
                                this.arealist[this.indexearea]['update_id'] = data.resdata.update_id;
                                this.arealist[this.indexearea]['mangname'] = data.resdata.mangname;
                            } else {
                                //添加
                                this.arealist.push({
                                    id: '',
                                    warehouse_id: $('#id').val(),
                                    name: this.name,
                                    type_id: $("#area_type").find("option:selected").val(),
                                    remarks: this.remarks,
                                    volume: this.volume,
                                    create_at: data.resdata.create_at,
                                    update_at: data.resdata.update_at,
                                    create_id: data.resdata.create_id,
                                    update_id: data.resdata.update_id,
                                    update_date: data.resdata.update_date,
                                    mangname: data.resdata.mangname,
                                    type_name: $("#area_type").find("option:selected").text(),
                                })
                            }
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                            this.name = '';
                            this.remarks = '';
                            this.volume = '1';
                            this.indexearea = 'a'
                        }
                    }
                })
            }

        },
        created() {
            this.getalldata()
        }
    })
</script>